<template>
  <div class="handle-wrap">
    <div class="handle-item" v-for="(item) in handleData" :key="item.title" @click="$router.push({path:'/application'})">
      <img :src="require(`@/assets/icons/${item.icon}.png`)" alt="">
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      handleData:[
        {
          icon:'my-start',
          title:'我发起的'
        },
        {
          icon:'my-handle',
          title:'我处理的'
        },
        {
          icon:'my-atme',
          title:'抄送我的'
        },
        {
          icon:'my-createnew',
          title:'发起新流程'
        },
      ]
    }
  }

}
</script>

<style lang='scss' scoped>
.handle-wrap{
  width: 65%;
  height: 100%;
  border-radius: 6px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .handle-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    width: 120px;
    height: 120px;
    border-radius: 6px;
    &:hover{
      background: #f4f6f9;
    }
    img{
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
    }
    span{
      font-size: 16px;
      margin-top: 10px;
    }
  }
}


</style>